<script setup lang="ts">
defineOptions({
  name: "curve"
});

import { ref, defineAsyncComponent, onMounted } from "vue";
import { useInitLineEcharts } from "@/views/common/fab/components/board/components/fabBoardSpcModelBoxItemEchartsHooks";
import { getFabAlarm24HoursCurve } from "@/api/modules/fab";

const echartsCom = defineAsyncComponent(() => import("@/views/common/components/echartsCom/index.vue"));

const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);

const props = withDefaults(
  defineProps<{
    params: Record<string, any>;
    title?: string;
    unit?: string;
  }>(),
  {
    params: () => ({}),
    title: "",
    unit: ""
  }
);

const dialogVisible = defineModel({ type: Boolean, default: false });
const loading = ref<boolean>(false);
const echartsOptions = ref<CommonEcharts.CommonEchartsOption | null>(null);

const initFabBoardOneDayEchartsData = async () => {
  loading.value = true;
  const res = await getFabAlarm24HoursCurve(props.params, () => {
    loading.value = false;
  });
  useInitLineEcharts(2, [], props.title, props.unit, res, async data => {
    echartsOptions.value = data;
    await echartsComRef.value?.updateOption(true);
    loading.value = false;
  });
};

const init = async () => {
  await initFabBoardOneDayEchartsData();
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <px-dialog v-model="dialogVisible" :title="`${title} - 历史曲线`" width="1200px">
    <Suspense>
      <template #fallback>
        <div v-loading="true" class="echarts-fallback" />
      </template>
      <template #default>
        <div v-loading="loading" class="echarts-content">
          <echartsCom ref="echartsComRef" :options="echartsOptions" />
        </div>
      </template>
    </Suspense>
  </px-dialog>
</template>

<style lang="scss" scoped>
.echarts-content {
  height: 500px;
}
</style>
